<template>
	<view>
		<navbar title="我的工作统计" :autoBack="true"></navbar>
		<u-loading-page :loading="loading"></u-loading-page>
		<scroll-view scroll-y="true" class="scbox" v-if="!loading">
			<view class="con">
				<view class="con__box">
					<view class="con__box__top">
						<view class="u-flex u-flex-y-center">
							<view class="con__box__top__a">
								<view class="con__box__top__a__t">
									时间
								</view>
								<view class="con__box__top__a__n" @click="show=true">
									{{date}}
									<view class="" style="margin-left: 14rpx;">
										<u-icon name="arrow-down-fill" color="#141827" size="20rpx"></u-icon>
									</view>
								</view>
							</view>
							<view class="con__box__top__a">
								<view class="con__box__top__a__t">
									员工
								</view>
								<view class="con__box__top__a__n">
									{{username}}
								</view>
							</view>
						</view>
						<view class="u-flex u-flex-y-center u-flex-center">
							<view class="con__box__top__b">
								<view class="con__box__top__b__num c24a">
									{{newCustomer}}
								</view>
								<view class="con__box__top__b__text">
									新增客户数
								</view>
							</view>
							<view class="con__box__top__b">
								<view class="con__box__top__b__num c304">
									{{totalCustomer}}
								</view>
								<view class="con__box__top__b__text">
									客户总数
								</view>
							</view>
							<view class="con__box__top__b">
								<view class="con__box__top__b__num cfd7">
									{{contractCustomer}}
								</view>
								<view class="con__box__top__b__text">
									联系客户数
								</view>
							</view>
						</view>
						<u-line color="#F1F5F8" :hairline='false'></u-line>
						<view class="u-flex u-flex-xy-center">
							<view class="con__box__top__c" v-for="(item,index) in list" :key="index">
								<view class="con__box__top__c__num">
									{{item.value}}
								</view>
								<view class="con__box__top__c__text">
									{{item.name}}
								</view>
							</view>
						</view>

					</view>
					<u-gap height="20rpx" bgColor="#F8F8F8"></u-gap>
					<u-sticky :offsetTop="0" :customNavHeight='0' bgColor="#fff">
						<view class="" style="padding: 30rpx 30rpx 6rpx;">
							<view class="con__box__tab">
								<view class="con__box__tab__item" v-for="(item,index) in tablist" :key="index"
									@click="curtab=index,getdata(startTime,endTime)" :class="curtab==index?'active':''">
									{{item.name}}
								</view>
							</view>
						</view>
					</u-sticky>
					<view class="" v-if="list1.length>0">
						<view class="con__box__item" v-for="(item,index) in list1" :key="index">
							<image src="/static/tool/dw.png" class="con__box__item__icon" mode=""></image>
							<view class="">
								<view class="con__box__item__name">
									{{item.content}}
								</view>
								<view class="con__box__item__text">
									客户:{{item.username}}
									<text class="con__box__item__time">{{$u.timeFormat(item.noticetime, 'mm-dd hh:MM')}}</text>
								</view>
							</view>
						</view>
					</view>
					<u-empty mode="list" v-else>
					</u-empty>
				</view>
			</view>
		</scroll-view>
		<u-datetime-picker :show="show" :maxDate='Number(new Date())' v-model="value1" mode="date" @confirm='confirm' @cancel='show=false'></u-datetime-picker>
	</view>
</template>

<script>
	import sale from '@/api/_sale.js'
	export default {
		data() {
			return {
				loading:true,
				list: [{
						name: '短信(条)',
						value: '0',
						key: 'messageCount'
					},
					{
						name: '电话(封)',
						value: '0',
						key: 'phoneCount'
					},
					{
						name: '拜访(次)',
						value: '0',
						key: 'visitCount'
					},
					{
						name: '微信(次)',
						value: '0',
						key: 'wechatCount'
					},
				],
				tablist: [{
						name: '拜访',
						type: ''
					},
					{
						name: '电话',
						type: ''
					},
				],
				curtab: 0,
				show: false,
				value1: Number(new Date()),
				date:'今天',
				contractCustomer:0,
				newCustomer:0,
				totalCustomer:0,
				list1:[],
				username:'',
				startTime:'',
				endTime:''
			};
		},
		methods: {
			async getdata(startTime, endTime) {
				this.loading=true
				let res = await sale.myWork({
					startTime,
					endTime
				})
				if(res.data.code==1){
					this.list.map(t=>{
						for (let key in res.data.data) {
							if(t.key==key){
								t.value=res.data.data[key]
							}
						}
					})
					this.contractCustomer=res.data.data.contractCustomer
					this.newCustomer=res.data.data.newCustomer
					this.totalCustomer=res.data.data.totalCustomer
					if(this.curtab==0){
						this.list1=res.data.data.visit
					}else{
						this.list1=res.data.data.phone
					}
					this.loading=false
				}
			},
			getTime(toData) {
				let today = uni.$u.timeFormat(toData, 'yyyy-mm-dd') //日期
				let todaystart = today + ' 00:00:00'
				let todayend = today + ' 23:59:59'
				this.startTime = new Date(todaystart).getTime()/1000
				this.endTime = new Date(todayend).getTime()/1000
				this.getdata(this.startTime,this.endTime)
			},
			confirm(e){
				this.getTime(e.value)
				this.show=false
				if(uni.$u.timeFormat(new Date(), 'yyyy-mm-dd')==uni.$u.timeFormat(e.value, 'yyyy-mm-dd')){
					this.date='今天'
				}else{
					this.date=uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				}
			}
		},
		onLoad() {
			this.getTime(new Date().getTime())
			this.username=uni.getStorageSync('dkuserinfo').username
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.con {
		padding: 20rpx 30rpx;

		&__box {
			background: #FFFFFF;
			border-radius: 20rpx;

			&__top {
				padding: 40rpx 0;

				&__a {
					width: 50%;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-bottom: 74rpx;

					&__t {
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 27rpx;
						color: #969696;
						line-height: 27rpx;
						margin-bottom: 28rpx;
					}

					&__n {
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 30rpx;
						color: #000000;
						line-height: 28rpx;
						display: flex;
						align-items: center;
					}
				}

				&__b {
					width: 31%;
					text-align: center;
					margin-bottom: 34rpx;

					&__num {
						font-family: PingFang SC;
						font-weight: 800;
						font-size: 42rpx;
						color: #24A050;
						line-height: 32rpx;
					}

					&__text {
						margin-top: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #7A7A7A;
						line-height: 23rpx;
					}

					.c24a {
						color: #24A050;
					}

					.c304 {
						color: #3049F6;
					}

					.cfd7 {
						color: #FD7A32;
					}
				}

				&__c {
					width: 25%;
					display: flex;
					align-items: center;
					flex-direction: column;
					height: 164rpx;
					justify-content: center;

					&__num {
						font-family: PingFang SC;
						font-weight: 800;
						font-size: 42rpx;
						color: #141827;
						line-height: 32rpx;
					}

					&__text {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #7A7A7A;
						line-height: 24rpx;
						margin-top: 30rpx;
					}
				}
			}

			&__tab {
				width: 624rpx;
				height: 83rpx;
				border-radius: 20rpx;
				border: 3rpx solid #F5F5F5;
				display: flex;
				align-items: center;
				justify-content: center;

				overflow: hidden;

				&__item {
					width: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFang SC;
					font-weight: 800;
					font-size: 28rpx;
					color: #2C2C2C;
					line-height: 28rpx;
					height: 100%;
				}

				.active {
					background-color: #f5f5f5;
				}
			}

			&__item {
				padding: 33rpx 30rpx 27rpx;
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid #F9F9F9;

				&__name {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #2C2C2C;
					line-height: 28rpx;
					margin-bottom: 17rpx;
				}

				&__text {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #787878;
					line-height: 24rpx;
				}

				&__time {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 26rpx;
					color: #787878;
					line-height: 20rpx;
					margin-left: 34rpx;
				}

				&__icon {
					width: 36rpx;
					height: 42rpx;
					margin-right: 13rpx;
				}
			}
		}
	}
</style>